/* var tabBox = document.getElementById('tabBox');
var tabList = tabBox.getElementsByTagName('div');
var navBox = document.getElementById('navBox');
var navList = navBox.getElementsByTagName('li'); */

// 解决方法一个: 自定义属性解决办法
// 循环三个LI, 给每一个LI都绑定点击事件
/* for(var i = 0; i < navList.length; i++) {
  // navList[i]: 当前循环下我们要操作的那个li
  // 在循环给每个li绑定点击事件的时候,我们给每一个li(元素对象)设置一个自定义属性myIndex, 属性值存储的是当前li的索引
  navList[i].myIndex = i;
  navList[i].onclick = function() {
    changeTab(this.myIndex);
  }
} */

// 闭包解决方案
/* for(var i = 0; i < navList.length; i++) {
  navList[i].onclick = (function(i) {
    return function() {
      changeTab(i);
    }
  })(i);
} */

// ES6中的let解决方案
/* for(let i = 0; i < navList.length; i++) {
  navList[i].onclick = function() {
    changeTab(i);
  }
}

// 封装一个函数实现选项卡的切换
function changeTab(clickIndex) {
  // 1. 先让所有的LI和DIV都没有选中的样式
  for(var i = 0; i < navList.length; i++) {
    navList[i].className = '';
    tabList[i].className = '';
  }
  // 2. 点击的是谁就给谁加
  navList[clickIndex].className = 'active';
  tabList[clickIndex].className = 'active';
} */

